<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期2</title>
<!--    <script src="../lib/vue-2.4.0.js"></script>-->
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">

<!--
    1.  当子孙组件出现错误时，会调用父组件的钩子函数：

    errorCaptured  [vue2.5.0+ 新增]
    (err: Error, vm: Component, info: string) => ?boolean

    返回 false 以阻止错误继续向上传播
 -->
    <input type="button" value="显示子组件（发生异常）" @click="showError()">
    <login v-if="isShow"></login>

</div>

<template id="login">
    <div>
        <label>method show: {{show()}}</label>
    </div>
</template>


<script>

    Vue.component('login',{
        template: '#login',
        data: function (){
            return {
            }
        },
        methods:{
            show(){
                // throw Error("子组件抛出了个异常")
                a
            },
        },
    })


    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            showError(){
                this.isShow = !this.isShow
            },
        },
        errorCaptured(err, vm, info) {
            // err: 错误对象
            // vm: 报错的子孙组件
            // info: 报错的子孙组件的具体哪个地方报错

            // 如果该函数返回 false， 辣么会阻止错误继续向上传递。
            console.log("Vue实例的errorCaptured方法：————-")
            console.log(err)
            console.log(vm)
            console.log(info)
            // return false
        }

    })

    //全局异常捕获
    Vue.config.errorHandler = function (err, vm, info) {
        // err: 错误对象
        // vm: 报错的子孙组件
        // info: 报错的子孙组件的具体哪个地方报错

        // 如果该函数返回 false， 辣么会阻止错误继续向上传递。
        console.log("Vue全局 errorHandler：————-")
        console.log(err)
        console.log(vm)
        console.log(info)
        return false
    }
</script>
</body>
</html>
